{% extends "public/layout.html" %}
{% block sidebar %}
{% include 'public/cmdb_left.html' %}
{% endblock %}


{% block custom_css %}
     <link rel="stylesheet" href="/static/css/dataTables.bootstrap.css" type="text/css" >
<style>
    #graphite_content{margin-top:20px;margin-left: 20px;margin-bottom:20px;}
    #graphite_key_input{width:400px;}
</style>

{% endblock %}

{% block body %}
<div class="right_content">
    <div id="graphite_head">
        <button type="button" class="btn btn-success" id="add_graphite_keys">添加维护</button>
    </div>


<div id="tab_box" >
    <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>#</th>
          <th>名称</th>
          <th>主机名</th>
          <th>维护时长</th>
	  <th>操作时间</th>
	  <th>操作</th>
        </tr>
      </thead>
      <tbody>

            {% for data in data %}
                <tr>
                <td> {{ data.id }} </td>
                <td> {{ data.maintenance_name }} </td>
                <td> {{ data.hostname  }} </td>
                <td> {{ data.maintenance_time }} </td>
		<td> {{ data.update_time}} </td>
		<td>
		<button type="button" class="btn btn-success"> <a href="/maintenance/del/?id={{ data.id }}">删除</a></button>
		</td>
                </tr>
            {% endfor %}

      </tbody>
    </table>
</div>


<div class="modal fade" id="add_graphite_keys_modal" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4>添加zabbix维护设备</h4>
            </div>


<form class="form-horizontal" id="graphite_content">
   <div class="form-group">
        <label for="name" class="col-sm-2 control-label">维护名称:</label>
        <div class="col-sm-8">
        <input type="text" class="form-control" name="maintenance_name"  id="maintenance_name" placeholder="英文">
        </div>
     </div>
    <div class="form-group">
        <label for="inputHostnames" class="col-sm-2 control-label">维护主机:</label>
        <div class="col-sm-8">
	<select class="form-control" name="hostname" id="hostname">
		{%for i in hostlist%}
                <option name="hostname">{{i["hostname"]}}</option>
		{%endfor%}
            </select>
        </div>
     </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">维护时长:</label>
        <div class="col-sm-8">
            <select class="form-control" name="key_type" id="key_type">
                <option name="one">1</option>
                <option name="two">2</option>
		<option name="there">3</option>
            </select>
        </div>
    </div>
<!--
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">图形标题:</label>
        <div class="col-sm-8">
        <input type="text" class="form-control" name="title"  id="graphite_title" placeholder="标题">
        </div>
     </div>
-->
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-primary" id="graphite_input_button">添加</button>
        </div>
    </div>
</form>


            <div class="modal-footer">
                <input class="btn btn-default" data-dismiss="modal" aria-hidden="true" type="button" value="取消">
            </div>

        </div>
    </div>
</div>
</div>

{% endblock %}
{% block js %}
    <script type="text/javascript" charset="utf8" src="/static/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="/static/js/dataTables.bootstrap.js"></script>

<script>
$(function(){
    $("#add_graphite_keys").click(function(){
        $('#add_graphite_keys_modal').modal('show');
    });
    $("#graphite_input_button").click(function(){
        hostname_input = $("#hostname");
        hostname = hostname_input.val();

        key_type_select = $("#key_type");
        key_type_value = key_type_select.val();

        maintenance_name_input = $("#maintenance_name");
        maintenance_name = maintenance_name_input.val();

        if (hostname == ""){
            swal("操作失败!", "host 不能为空", "error");
        }

        if (key_type_value == ""){
            swal("操作失败!", "维护时间不能为空", "error");
        }

        $.post("/monitor/zabbix/maintenance/add", { "name": hostname , "time":key_type_value,"maintenance_name":maintenance_name},
            function(data){
                if(data == "1"){
                    swal("操作成功!", "", "success");
                }else{
                    swal("操作失败", data, "error");
                }
            });
        hostname_input.val('');
        $('#add_graphite_keys_modal').modal('hide');
    });

    $('#table_id').DataTable({
        "language":{
                "lengthMenu":"每页 _MENU_ 条记录",
                "zeroRecords":"没有找到记录",
                "sInfo":"第 _PAGE_ 页 ( 总共 _PAGES_ 页),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项目)",
                "infoEmpty":"无记录",
                "infoFiltered":"(从 _MAX_ 条记录过滤)",
                "sSearch":"搜索:",
                "oPaginate":{
                    "sFirst":"首页",
                    "sPrevious":"上一页",
                    "sNext":"下一页",
                    "sLast":"末页"
                }
            }
    });
})
</script>

{% endblock %}
